import { Form, Input, Modal, Select } from 'antd';
import { useState } from 'react';
import InputDate from './InputDate';

const { TextArea } = Input

const defaultInfor = {
  fd_claNum: "",
  fd_classroomNum: "",
  fd_curriculumNum: "",
  fd_endTime: new Date(),
  fd_startTime: new Date()
}

const AddExamination = ({ open, onCreate, onCancel, classrooms, curriculum, classes }) => {
  const [form] = Form.useForm();
  const [startTime, setStartTime] = useState(new Date())
  const [endTime, setEndTime] = useState(new Date())


  const updateItems = [
    { name: "fd_curriculumNum", label: "课程", rules: { must: { required: true, message: '请选择课程在提交', }, }, offset: 1, options: curriculum },
    { name: "fd_classroomNum", label: "地点", rules: { must: { required: true, message: '请选择地点在提交', }, }, offset: 1, options: classrooms },
    { name: "fd_claNum", label: "班级", rules: { must: { required: true, message: '请选择班级在提交', }, }, offset: 1, options: classes },
    { name: "fd_startTime", label: "开始时间", rules: { must: { required: true, message: '请设置开始时间', }, }, offset: 1, },
    { name: "fd_endTime", label: "结束时间", rules: { must: { required: true, message: '请设置结束时间', }, }, offset: 1, },
    { name: "fd_remark", label: "备注", rules: {}, offset: 1, },
  ]


  return (
    <Modal
      destroyOnClose
      width={511}
      open={open}
      okText="提交"
      cancelText="退出"
      onCancel={onCancel}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            form.resetFields();
            const newUpdateData = { ...values, "fd_startTime": `${startTime}`, "fd_endTime": `${endTime}` }
            onCreate(newUpdateData);
          })
          .catch((info) => {
            console.log('Validate Failed:', info);
          });
      }}
    >
      <Form
        preserve={false}
        form={form}
        layout="horizontal"
        name="form_in_modal"
        wrapperCol={{
          span: 12,
        }}
        className="updata-user-infor"
        initialValues={defaultInfor}
      >
        {
          updateItems.map((item) => {
            return (
              <Form.Item
                labelAlign='left'
                key={item.name}
                name={item.name}
                label={item.label}
                rules={[item.rules?.must]}
                labelCol={{
                  offset: 1,
                  span: 5
                }}
                wrapperCol={{
                  span: 17,
                  offset: 0
                }}
              >
                {
                  item.name === "fd_startTime" ? <InputDate setTime={setStartTime} /> :
                    item.name === "fd_endTime" ? <InputDate setTime={setEndTime} /> :
                      item.name === "fd_remark" ? <TextArea rows={4} className="remark" /> :
                        <Select
                          showSearch
                          filterOption={(input, option) =>
                            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                          }
                          listHeight={90}
                          style={{ width: 160 }}
                          key="value"
                          options={item.options}
                        />
                }
              </Form.Item>
            )
          })
        }
      </Form>
    </Modal>
  );
};
export default AddExamination